
<template>
  <div style="height: 100vh;overflow: hidden;display:flex;align-items: center;justify-content: center;"class="background-container">
    <div style="display: flex;width: 50%; margin: 0 auto;background-color: antiquewhite;justify-content: center;border-radius: 10px;overflow: hidden">
      <div style="flex: 1">
        <img src="@/assets/dying_of_roma.jpg" alt=""style="width: 100%;height: 100%">
      </div>
      <div style="flex: 1;align-items: center;justify-content: center; ">
        <el-form :model = "user" style ="width: 70% ;margin: 0 auto" :rules = "rules" ref="loginRef">
          <div style="font-size: 20px;text-align: center;margin-bottom: 20px;">欢迎来到天堂之令 </div>
           <el-form-item prop="username">
             <el-input prefix-icon="el-icon-user" placeholder = "请输入账号" v-model = "user.username">
             </el-input>
           </el-form-item>
           <el-form-item prop="password">
             <el-input prefix-icon="el-icon-lock" placeholder = "请输入密码" v-model = "user.password">
             </el-input>
           </el-form-item>
           <el-form-item prop = "code">
             <div style="display: flex">
               <el-input prefix-icon="el-icon-circle-check" style="flex: 1;" placeholder = "验证码 "  v-model = "user.code"></el-input>
               <div style="flex: 1">
                 <valid-code @update:value = "getCode" />
               </div>
             </div>
           </el-form-item>
          <el-form-item >
            <el-button type = "primary" style = "width: 50%;" @click="login">
              登录
            </el-button>

          </el-form-item>
          <div style="display: flex;">
            <div style="flex: 1">
              还没有账号？请<span style=" color: #42b983; cursor: pointer;"@click = "toRegister">注册</span>
            </div>
            <div style="flex: 1; text-align: right">
              <span style="color: #42b983; cursor: pointer;">忘记密码</span>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>

</template>
<script>
import ValidCode from "@/components/ValidCode.vue";
export default {
  name: "Login.vue",
  components:{
    ValidCode

  },
  data(){
    const validCode = (rule,value,callback)=>{
      if(value === ''){
        callback(new Error("请输入验证码"))
    }
      else if(value.toLowerCase() !== this.code.toLowerCase()){
        callback(new Error("验证码错误"))
      }
      else {
        callback()
      }
    }
    return{
      code:'',
      user: {
        code: '',
        username:'',
        password:'',
      },
      rules:{
        username: [{required:true,message:"请输入账号",trigger:"blur"}],
        password: [{required:true,message:"请输入密码",trigger:"blur"}],
        code:[{validator:validCode,trigger:"blur"}]
      }
    }
  },
  created(){}
  ,
  methods:{
    getCode(code){
      this.code = code
    },
    login(){
      console.log('存储的验证码:', this.code);
      this.$refs['loginRef'].validate((valid) => {
        if (valid) {
          this.$request.post('/login',this.user).then((res)=>{
            if(res.code === '200'){
              console.log(res.code)
              this.$router.push('/')
              this.$message.success('登录成功')
              localStorage.setItem("user_data",JSON.stringify(res.data))
              console.log(res.data.token)
            }else{
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    toRegister(){
      this.$router.push({path:'/register'})
    }
  }


}
</script>


<style scoped>

</style>